iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
佛心分享-IT 人自學之術

ASP.NET Core 30日成長路系列 第 25

Day25:View Component的使用方法

  • 分享至 

  • xImage
  •  

View Component的使用方法


View Component檢視元件的目的是建立一個在網頁上可以重複使用的元件。
可能聽起來會很像我們前面所講到的Partial View,但更加地進階,因為這個檢視元件由一個.cshtml與.cs檔所構成,可以提供更好的關注點分離設計,這些是Partial View所不具備的。

概觀
檢視元件是將網頁中的某區塊做成可重複使用的元件,例如:排行榜、公告、登入面板、購物車、最新文章、促銷資訊等,再讓檢視呼叫(Invoke)複雜功能進行使用。
雖然檢視元件跟Partial View很像,但在進行這些功能與資料庫處理時仍能遵守關注點分離的原則。
以下是檢視元件的特性:

  • 轉譯區塊,而不是整個Response。
  • 設計時可維持關注點分離與可測試性。
  • 可以傳遞參數給檢視元件所在的View。
  • 適合複雜的邏輯,甚至能允許資料庫存取。
  • 檢視元件不參與Controller的生命週期,因此不能使用filter及Model Binding模型繫結。

建立與使用過程
檢視元件由兩個部分所組成!
1️⃣檢視元件類別:繼承ViewComponent類別,用來運行邏輯與資料存取程式。
2️⃣檢視元件的View:回傳View的檢視,用於視覺化設計。

建立與使用過程如下:

  1. 建立檢視元件類別
  2. 建立檢視元件之View檢視
  3. 將檢視元件註冊為Tag Helper(補充)
  4. 在View或者Controller叫用檢視元件

補充📄
若View以Tag Helper形式呼叫檢視元件,檢視元件必須先在_ViewImports.cshtml中以@addTagHelper註冊

那麼以上就是今天的分享啦~
明天見啦~See YA(。•̀ᴗ-)


上一篇
Day24:如何用Html Helpers建立CRUD表單
下一篇
Day26:設定第一個Entity Framework Core資料庫
系列文
ASP.NET Core 30日成長路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言